<template>
    <div class="DataModel" v-if="ViewContent">
        <component :is="ViewContent" :option="ObjectOptions" />
    </div>
</template>
<script setup>
import { shallowRef, watch, ref, inject, nextTick } from "vue";
import arrayView from "./array.vue";
import numberView from "./number.vue";
import objectView from "./object.vue";
import stringView from "./string.vue";
import booleanView from "./boolean.vue";

const Mapping = {
    array: arrayView,
    number: numberView,
    object: objectView,
    string: stringView,
    integer: numberView,
    boolean: booleanView,
};
const ViewContent = shallowRef();

const props = defineProps(["value", "option"]);
const emit = defineEmits(["updata:value"]);
const schemas = inject("schemas");

const ObjectOptions = ref();

watch(
    () => props.option,
    (val) => {
        if (val.$ref) {
            var Key = val.$ref.replace("#/components/schemas/", "");
            nextTick(() => {
                ObjectOptions.value = JSON.parse(JSON.stringify(schemas.value[Key]));
                ViewContent.value = Mapping[schemas.value[Key].type];
            });
        } else {
            ViewContent.value = Mapping[val.type] || undefined;
            ObjectOptions.value = JSON.parse(JSON.stringify(props.option));
        }
    },
    { deep: true, immediate: true }
);
</script>
<style lang="less" scoped>
.DataModel {
    display: inline-block;
    // margin: 8px 0 0 0;
}
</style>
